<template>
	<view class="content">
		<view class="head" v-if="detail.order_status == 1 || detail.order_status == 4">
			<i class="iconfont iconjiaoyichenggong"></i>
			<view class="head-status-title">交易成功</view>
		</view>
		<view class="head" v-if="detail.order_status == 0">
			<i class="iconfont icondaifukuan"></i>
			<view class="head-status-title">待付款</view>
		</view>
		<view class="title">订单详情</view>
		<view class="detail">
			<view>订&nbsp;&nbsp;单 号:　<text>{{detail.order_sn}}</text></view>
			<view>订&nbsp;&nbsp;单 名:　<text>{{detail.title}}</text><!-- <view>查看</view> -->
			</view>
			<view>学　　科:　<text>{{detail.subject}}</text></view>
			<view>下单时间:　<text>{{detail.time}}</text></view>
			<view>授课老师:　<text>{{detail.teacher_name}}</text></view>
			<view>订单金额:　<text>¥{{detail.orderAmount}}</text></view>
			<view>学情分抵扣:　<text>-￥{{detail.studyScore}}</text></view>
			<view>支付金额:　<text>¥{{detail.price}}</text></view>
			<view v-if="detail.order_status == 1 || detail.order_status == 4">支付方式:　<text>{{detail.pay_way == 'packet' ? '钱包支付' :detail.pay_way == 'paid' ? '家长代付' : ''}}</text></view>
		</view>
		<view class="btn-box">
			<view class="btn-common go-question" @tap="goCourse(detail.course_id)">前往课程</view>
			<view class="btn-common go-over" v-if="detail.order_status == 0 && is_close(detail.time)">已失效</view>
			<view class="btn-common go-pay" v-else-if="detail.order_status == 0" @tap="goPay">立即支付</view>
			<!-- <view class="btn-common go-pay" v-else-if="detail.order_status == 4" @tap="check">查看评价</view>
			<view class="btn-common go-pay" v-else-if="detail.order_status == 1" @tap="write">去评价</view> -->
		</view>
		<!-- <view class="explain" v-if="state == 1">支付方式说明包含：家长代付，微信，支付宝，余额，银行卡</view> -->
		<!-- 支付弹框 -->
		<!-- <view class="pay-pop" v-if="showPay" @tap.stop>
			<view class="pay-cont">
				<view class="pay-head">
					<i class="iconfont iconguanbi pay-head-i" @tap="closePop"></i>
					<view class="pay-head-text">确认支付</view>
				</view>
				<view class="pay-n">¥{{detail.price}}</view>
				<view class="pay-pattern">选择付款方式</view>
				<scroll-view scroll-y class="bank-card-box">
					<view class="row4_item" v-for="(item, index) in items" :key="index" @tap="changeType(index,item.value)">
						<view class="row4_item_letf">
							<i :class="item.class"></i>
							<text>{{item.text}}</text>
						</view>
						<i class="iconfont" :class="[change == index ? 'iconduigou' : '']"></i>
					</view>
					<navigator hover-class="false" class="row4_item" url="addBankcard">
						<view class="row4_item_letf">
							<i class="iconfont iconyinhangka icon-styl4"></i>
							<text class="addCard">添加银行卡</text>
						</view>
						<view class="row4_item_rgith">
							<i class="iconfont iconjiantou icon-styl5"></i>
						</view>
					</navigator>
				</scroll-view>
				<view class="pay-btn" @tap="closePop">确认付款</view>
			</view>
		</view> -->
	</view>
</template>

<script>
	import util from '@/common/util.js'
	export default {
		data() {
			return {
				// items: [
				// 	{
				// 		class: 'iconfont iconyue-mian icon-styl0',
				// 		text: '账户余额',
				// 		value: 0
				// 	},{
				// 		class: 'iconfont iconzhifubao icon-styl1',
				// 		text: '支付宝支付',
				// 		value: 1
				// 	},{
				// 		class: 'iconfont iconweixinzhifu icon-styl2',
				// 		text: '微信支付',
				// 		value: 2
				// 	},{
				// 		class: 'iconfont iconjiachang icon-styl3',
				// 		text: '家长代付',
				// 		value: 3
				// 	}
				// ],
				change: 0,
				payType: '',
				showPay: false,
				currentSelect: 0,
				state: 1,
				order_id: '', //订单id
				detail: {}
			}
		},
		onLoad(e) {
			this.order_id = e.order_id;
			this.getDetail();
		},
		methods: {
			/* 获取订单详情 */
			getDetail() {
				this.$zbapi.apiPost('parent/order/info/' + this.order_id, {
					user_id: uni.getStorageSync('userInfo').id
				}).then(res => {
					if (res.data.code == 0 && res.data.data) {
						var data = res.data.data;
						data.time = util.getBriefTime(data.create_time);
						data.price = data.real_pay / 100;
						data.studyScore = data.study_score / 100;
						data.orderAmount = data.order_amount / 100;
						this.detail = data;
					} else {
						uni.showToast({
							title: res.data.message,
							icon: 'none'
						})
					}
				})
			},
			// 判断是否失效
			is_close(time) {
				// 半小时
				return (+new Date() - +util.dateUtils.parse(time + ":00")) > 30 * 60000;
			},
			goPay() {
				// this.showPay = true
				uni.showLoading({
					mask: true,
					title: '支付中'
				})
				this.$zbapi.apiPost('stu/order/payWait', {
					order_sn: this.detail.order_sn
				}).then(res => {
					uni.hideLoading()
					switch (res.data.code) {
						/* 支付成功 */
						case 0:
							// 根据返回是否有wxpay判断是否微信支付
							if (res.data.data.wxpay) {
								// this.pay_wechat(res.data.data)
								uni.requestPayment({
									provider: 'wxpay',
									orderInfo: res.data.data.wxpay,
									success: e => {
										uni.showToast({
											title: "支付成功",
											complete() {
												setTimeout(a => {
													uni.reLaunch({
														url: './free-index'
													})
												}, 800)
											}
										})
									},
									fail: e => {
										if (/canceled/.test(e.errMsg)) {
											uni.showToast({
												title: "用户取消支付",
												icon: "none"
											})
										} else {
											uni.showModal({
												content: '支付失败,原因为: ' + e.errMsg,
												showCancel: false
											});
										}
									}
								});
							} else {
								uni.showToast({
									title: "支付成功",
									complete() {
										setTimeout(a => {
											uni.navigateBack({
												delta: 1
											})
										}, 800);
									}
								})
							}
							break;
						case 401:
							uni.showToast({
								title: '学情分抵扣比例超过限制',
								icon: 'none'
							});
							break;
						case 402:
							uni.showToast({
								title: res.data.message,
								icon: "none",
								complete() {
									setTimeout(a => {
										uni.navigateBack({
											delta: 1
										})
									}, 800);
								}
							});
							break;
						case 405:
							uni.showToast({
								title: res.data.message,
								icon: "none",
								complete() {
									setTimeout(a => {
										uni.navigateBack({
											delta: 1
										})
									}, 800);
								}
							});
							break;
						case 501:
							uni.showToast({
								title: '余额不足',
								icon: 'none'
							});
							break;
						case 4060:
							uni.showToast({
								title: res.data.message,
								complete() {
									setTimeout(a => {
										uni.navigateBack({
											delta: 1
										})
									}, 800);
								}
							});
							break;
						default:
							break;
					}
				})
			},
			closePop() {
				this.showPay = false
			},
			/* 切换支付类型 */
			changeType(index, value) {
				this.change = index;
				this.payType = value;
			},
			/* 跳转写评价 */
			// write() {
			// 	uni.navigateTo({
			// 		url: 'order-write?order_id='+this.order_id
			// 	})
			// },
			/* 跳转查看评价 */
			check() {
				uni.navigateTo({
					url: 'order-rating?order_id=' + this.order_id
				})
			},
			goCourse(cid) {
				if (cid) {
					uni.navigateTo({
						url: '/pages/free-lesson/lesson-detail?course_id=' + cid
					})
				} else {
					uni.showToast({
						title: '课程不存在',
						icon: 'none'
					})
				}
			}

		}
	}
</script>

<style>
	.content {
		position: absolute;
		height: 100%;
		width: 100%;
		overflow: hidden;
	}

	/**
	 * 头部样式
	 */
	.head {
		display: flex;
		justify-content: center;
		align-items: center;
		height: 120upx;
		background-color: #fe9900;
		color: #ffffff;
		font-size: 38upx;
	}

	.head i {
		font-size: 50upx;
	}

	.head-status-title {
		margin-left: 16upx;
		font-size: 38upx;
	}

	/**
	 * 头部样式结束
	 */
	.title {
		display: flex;
		align-items: center;
		margin-left: auto;
		margin-right: auto;
		width: 690upx;
		height: 94upx;
		font-size: 36upx;
		color: #333333;
		border-bottom: 2upx solid rgba(229, 229, 229, 1);
	}

	.detail {
		margin-left: auto;
		margin-right: auto;
		width: 690upx;
		border-bottom: 2upx solid rgba(229, 229, 229, 0.6);
		padding: 15upx 0upx;
	}

	.detail view {
		display: flex;
		min-height: 70upx;
		color: #333333;
		font-size: 34upx;
	}

	.detail view text {
		width: 70%;
		margin-left: 20upx;
	}

	.detail view view {
		position: absolute;
		right: 30upx;
		color: #fe9900;
	}

	.item-name {
		display: flex;
		justify-content: space-between;
		align-items: center;
		width: 150upx;
		font-size: 34upx;
		color: #333333;
	}

	.item-cont {
		display: flex;
		align-items: center;
		margin-left: 13upx;
		font-size: 34upx;
		color: #333333;
	}

	.add-browse {
		margin-top: 8upx;
		margin-left: 13upx;
		font-size: 34upx;
		color: #333333;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
		width: 437upx;
	}

	.browse {
		display: flex;
		align-items: center;
		font-size: 34upx;
		color: #fe9900;
		margin-left: 24upx;
	}

	/* .name-center2 {
		letter-spacing: 3upx;
	}
	.name-center3 {
		letter-spacing: 3upx;
	}
	.name-center4 {
		letter-spacing: 3upx;
	} */

	.btn-box {
		display: flex;
		justify-content: flex-end;
		margin: 22upx auto;
		width: 690upx;
	}

	.btn {
		display: flex;
	}

	.btn-common {
		display: flex;
		justify-content: center;
		align-content: center;
		width: 160upx;
		height: 60upx;
		border-radius: 8upx;
		font-size: 34upx;
		margin-left: 15upx;
		color: #FF9900;
		border: 2upx solid #FF9900;
	}

	.go-question {
		color: #fe9900;
		border: 2upx solid #fe9900;
	}

	.go-over {
		color: rgba(0, 0, 0, .3);
		background-color: #F7F7F7;
		border: 2upx solid #CCCCCC;
	}

	.explain {
		color: #CCCCCC;
		font-size: 34upx;
		position: absolute;
		bottom: 120upx;
		margin: 0 30upx;
	}

	/**
	 * 详情结束
	 */

	.pay-pop {
		position: absolute;
		top: 0;
		left: 0;
		z-index: 9998;
		width: 100%;
		height: 100%;
		background-color: rgba(0, 0, 0, .4);
	}

	.pay-cont {
		position: absolute;
		z-index: 9999;
		bottom: 0;
		width: 750upx;
		height: 780upx;
		background-color: #FFFFFF;
	}

	.pay-head {
		display: flex;
		justify-content: center;
		align-items: center;
		border-bottom: 2upx solid rgba(229, 229, 229, 0.5);
		padding-left: 30upx;
		padding-right: 30upx;
		height: 87upx;
	}

	.pay-head-i {
		position: absolute;
		color: #999999;
		line-height: 90upx;
		font-size: 35upx;
		left: 30upx;
	}

	.pay-head-text {
		font-size: 36upx;
		color: #333333;
	}

	.pay-n {
		display: flex;
		justify-content: center;
		align-items: center;
		font-size: 66upx;
		height: 104upx;
		margin-top: 20upx;
		color: #333333;
	}

	.pay-pattern {
		font-size: 34upx;
		color: #999999;
		padding: 20upx 0 20upx 30upx;
		border-bottom: 2upx solid rgba(229, 229, 229, 1);
	}

	.bank-card-box {
		height: 306upx;
	}

	.row4_item {
		width: 690upx;
		padding: 0 30upx;
		height: 100upx;
		line-height: 100upx;
		display: flex;
		justify-content: space-between;
		border-bottom: 2upx solid rgba(229, 229, 229, 1);
	}

	.row4_item_letf {
		display: flex;
		justify-content: flex-start;
		height: 100upx;
		line-height: 100upx;
	}

	.row4_item_letf text {
		color: #333333;
		font-size: 34upx;
	}

	.row4_item_letf .iconfont {
		font-size: 40upx;
		line-height: 100upx;
		margin-right: 16upx;
	}

	.icon-styl0 {
		color: #FFB800;
	}

	.icon-styl1 {
		color: #1296DB !important;
	}

	.icon-styl2 {
		color: #41B035 !important;
	}

	.icon-styl3 {
		color: #fe9900;
	}

	.icon-styl4 {
		color: #2F77F1;
	}

	.icon-styl5 {
		color: #999999;
		display: inline-flex;
		line-height: 98upx !important;
	}

	.iconduigou {
		color: #fe9900;
		font-size: 36upx;
		line-height: 100upx;
	}

	.pay-btn {
		display: flex;
		justify-content: center;
		align-items: center;
		margin-left: auto;
		margin-right: auto;
		margin-top: 40upx;
		width: 690upx;
		height: 80upx;
		background-color: #fe9900;
		color: #ffffff;
		font-size: 34upx;
		border-radius: 8upx;
	}
</style>
